<template>
  <div>
    <el-dialog width="400px" :title="title" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="userForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="userForm.userName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item v-if="isUpdateStatus===false" label="性别">
        <el-radio v-model="userForm.sex" label="男">男</el-radio>
        <el-radio v-model="userForm.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="userForm.number" placeholder="请输入编号"></el-input>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="userForm.userType" placeholder="请选择用户类型">
            <el-option
              v-for="item in userBox"
              :key="item.val"
              :label="item.lab"
              :value="item.val"/>
          </el-select>
        </el-form-item>

        <div v-if="userForm.userType==='2'">
          <el-form-item label="学院">
            <el-input v-model="userForm.phone" placeholder="请输入所在学院"></el-input>
          </el-form-item>
          <el-form-item label="头衔">
            <el-input v-model="userForm.phone" placeholder="请输入头衔"></el-input>
          </el-form-item>
        </div>

        <div v-if="userForm.userType==='3'">
          <el-form-item label="学院">
            <el-input v-model="userForm.phone" placeholder="请输入所在学院"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="userForm.phone" placeholder="请输入所在班级"></el-input>
          </el-form-item>
        </div>

        <el-form-item label="手机号">
          <el-input v-model="userForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item v-if="isUpdateStatus===false" label="密码">
          <el-input v-model="userForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="isUpdateStatus===false" type="primary" @click="confirmAdd">确 定</el-button>

        <el-button v-if="isUpdateStatus===true" type="primary" @click="confirmUpdate">更 新</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UserService from "@/api/UserService";
export default {
  name: "add",

  data(){
    return {
      title:'',
      dialogFormVisible: false,

      isUpdateStatus:false,

      userBox:[{
        lab:"管理员",
        val:1
      },{
        lab:"教师",
        val:2
      },{
        lab:"学生",
        val:3
      },
      ],

      userForm: {
        userName: '',
        sex: '男',
        number:'',
        userType:'',
        phone:'',
        email:'',
        password:'',

        sClass:'',//班级
        institute:'',//学院
        title:'',//头衔
      },
    }
  },

  methods:{
    openDialog(){
      if (this.isUpdateStatus===true){
        this.userForm = {}
      }
      this.title = "新增用户";
      this.isUpdateStatus = false;
      this.dialogFormVisible = true;
    },

    openDialogUpdate(data){
      this.userForm = data;
      this.title = "更新用户";
      this.isUpdateStatus = true;
      this.dialogFormVisible = true;
    },

    // 确定添加用户
    confirmAdd(){
      this.dialogFormVisible = false
      console.log(this.userForm)

      var that = this;
      this.$confirm('此操作将添加用户, 是否继续?', '添加提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("确认添加---------------")
        UserService.add(that.userForm,function (data) {
          console.log("su =============")
          if (data === true){
            that.$message({
              type: 'success',
              message: '添加成功!'
            });
            that.$parent.getUserPage();
          }else {
            that.$message({
              type: 'warning',
              message: '添加失败!'
            });
          }
        },function (error) {
          console.log("dsdsad========")
          that.$message.error("系统异常，添加失败！");
          console.log(error)
        })

      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消添加'
        });
      });
    },

    confirmUpdate(){

    },

  }
}
</script>

<style scoped>

</style>
